import React, { Component } from 'react';
import { Modal, Input, Form,Select } from 'antd';
import { dataSetGetFiles, joinOutResource, resetJoinOutResource } from 'src/services/DataManage';
import { FormInstance } from 'antd/lib/form';

interface Iprops {
	modalVisibleValue:boolean
    modalVisible:any
    outData:any
    addNodeFunc:any
    addRelation:any
	joinComponentFunc:any
	setOutDataFunc:any
}

class DataOutModal extends Component<Iprops,any> {
    state = {
    	tableName: '',
    	outPutData: {},
    	files: [],
    }

	formRef = React.createRef<FormInstance>()
	

    handleOk = () => {
    	this.formRef.current.validateFields().then(
    		value => {
    			this.handleAadOutComponent( { ...this.props.outData,...value } );
    		}
    	);
    	
    }
    
    handleAadOutComponent = async data => {
    	let fdata = {
    		// 'fields': data.model.fieldMappings.map( item => item.tableField ),
    		'folderId': data.folderId,
    		'fields': [],
    		'position': 1,
    		// 'sqlSelectQuery': data.model.querySql,
    		'tableName': data.tableName,
    		'comments': data.comments
    	};
    	let info = null;
    	if( this.props.outData.edit ) {
    		const { code,name } = this.props.outData;
    		info = await resetJoinOutResource( { data: { componentCode: code,componentName: name,...fdata } } );
    	}else {
    		info = await joinOutResource( { data: { ...fdata,'modelId': data.modelId } } );
    	}
    	if( info.data.success  ) {
    		let toData = { ...info.data.data,
    			form: { 'tableName': data.tableName,'comments': data.comments,'folderId': data.folderId, },
    			edit: this.props.outData.edit,
    			nodeType: 'output',
    			nodeShapeTpye: 'export',
    			style: { 'primaryColor': '#FB7CE1' },
    			shape: 'SimplicityNode' };
    		this.props.joinComponentFunc( data,toData,{} );
    		this.handleCancle();
    	}
    }
    
    getFiles = async () => {
    	const info  = await dataSetGetFiles( { data: '' } );
    	if( info.data&&info.data.success  ) {
    		this.setState( { files: info.data.data } );
    	}
    }

    handleCancle = () => {
    	let data = this.props.outData;
    	delete data.edit;
    	this.props.setOutDataFunc( data );
    	this.props.modalVisible( 'dataOutVisible', false );
    	this.formRef.current.resetFields();
    }

    // eslint-disable-next-line react/no-deprecated
    componentWillMount(): void {
    	this.getFiles();
    }

    componentDidUpdate( prevProps: Readonly<Iprops>, prevState: Readonly<any>, snapshot?: any ): void {
    	if( this.props.modalVisibleValue && this.props.outData.form &&this.props.outData.edit ) {
    		if( this.props.modalVisibleValue !== prevProps.modalVisibleValue ) {
    			this.formRef.current.setFieldsValue( this.props.outData.form );
    		}
    	}

    }

    render() {
    	const layout = {
    		labelCol: { span: 3 },
    		wrapperCol: { span: 20 },
    	};
    	let title = '输出';
    	if( this.props.outData.edit ) {
    		title += ' (编辑)';
    	}
    	return (
    		<Modal visible={this.props.modalVisibleValue}
    			onCancel={this.handleCancle}
    			onOk={() => this.handleOk()}
    			okText="确定" mask={false} maskClosable={false}
    			cancelText="取消" 
    			forceRender={true}
    			title={title}>
    			<Form ref={this.formRef} {...layout} labelAlign={'right'}>
    				<Form.Item label="名称" 
							   name="tableName" 
							   rules={[ { required: true, message: '请输入名称' } ]}>
    					<Input/>
    				</Form.Item>
    				<Form.Item label="描述" name="comments">
    					<Input/>
    				</Form.Item>
    				<Form.Item label="数据集" name="folderId"
							   rules={[ { required: true, message: '请选择数据集' } ]}>
    					<Select>
    						{
    							this.state.files.map( item => ( <Select.Option key={item.id} value={item.id}>{ item.tableName }</Select.Option> ) )
    						}
    					</Select>
    				</Form.Item>
    				{/* <Form.Item label="运行频率" name="xxx">
    					<Select>
    						<Select.Option value="1">每天早上4：00</Select.Option>
    						<Select.Option value="2">每周一早上4：00</Select.Option>
    						<Select.Option value="3">每月最后一天23：30</Select.Option>
    					</Select>
    				</Form.Item> */}
    			</Form>
    		</Modal>
    	);
    }
}

export default DataOutModal;